<script>
import axios from 'axios'
import Vue from 'vue';
import { Grid, GridItem } from 'vant'
import * as $http from '@/utils/http'

Vue.use(Grid);
Vue.use(GridItem);

export default {
  data() {
    return {
      hotcate: []
    }
  },

 async mounted() {
    const result = await $http.get('/hotcate')
    this.hotcate = result.data
    this.hotcate.push({
      title: '更多...'
    })
  },

  methods: {
    handleClick(title) {
      this.$router.push({
<<<<<<< HEAD
        path: '/list',
=======
        name: 'list',
>>>>>>> before-10-1
        query: {
          keywords: title
        }
      })
    }
  },
}
</script>

<template>
  <van-grid :column-num="4" :border="false">
    <van-grid-item
      v-for="hot in hotcate"
      @click="handleClick(hot.title)"
    >
      <img :src="hot.img" alt="">
      <span>{{hot.title}}</span>
    </van-grid-item>
  </van-grid>
</template> 

<style lang="scss">
.van-grid-item {
  img {
    width: 85%;
    border-radius: 0.08rem;
  }

  &:last-child {
    img: {
      display: none;
    }
  }
}
</style>
